<template>
	<view class="rows" :style="{backgroundColor: pageData.bgColor, padding:`0 ${pageData.margin*2}rpx`}" v-if="pageData">
		<view v-if="!pageData.mode">
			<!-- 真机点击跳转视频号 -->
			<channel-video :finder-user-name="pageData.finderUserName" :feed-id="pageData.feedId" :feed-token="pageData.feedToken" :autoplay="pageData.autoplay"
				object-fit="cover" class="width" :style="{height, 'vertical-align': 'middle'}" v-if="pageData.type == 3"></channel-video>

			<video :src="pageData.videoSrc" :autoplay="pageData.autoplay" object-fit="cover" class="Video" :style="{height}" v-else></video>
		</view>

		<!-- 轮播 -->
		<swiper :style="{height}" :autoplay="swiperAutoplay" circular :interval="3000" :duration="1500" indicator-dots indicator-color="#fff" :indicator-active-color="color" 
			@change="changeSwiper" v-if="pageData.mode == 1 && pageData.list.length">
			<swiper-item v-for="(item,index) in pageData.list" :key="index">
				<channel-video :finder-user-name="item.finderUserName" :feed-id="item.feedId" :feed-token="item.feedToken" :autoplay="item.autoplay"
					object-fit="cover" class="wh" :style="{'vertical-align': 'middle'}" v-if="item.type == 3"></channel-video>

				<video :src="item.videoSrc" :autoplay="item.autoplay" object-fit="cover" class="Video wh" v-else
					@play="playVideo" @pause="endVideo" @ended="endVideo" @loadedmetadata="loadedmetadata"></video>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name:'VideoList',
		props:['pageData'],
		data() {
			return {
				swiperAutoplay: false
			}
		},
		computed: {
			...mapState(['color']),
			height(){
				let scale = this.pageData.scale || 0.5625 // 默认16:9
				let margin = this.pageData.margin || 0
				return scale * (750 - margin * 2 * 2) + 'rpx'
			}
		},
		methods: {
			playVideo(){
				this.swiperAutoplay = false
			},
			endVideo(){
				this.swiperAutoplay = true
			},
			changeSwiper(e){
				// console.log(e.detail.current)
			},
			loadedmetadata(){
				if(this.pageData.list[0].autoplay) return
				this.swiperAutoplay = true
			}
		}
	}
</script>
<style lang="scss" scoped>
.Video{
	width: 100%;
	display: block;
	padding: 0 !important;
	margin: 0 !important;
}
</style>
